<template>
  <el-dialog v-model="open" :title="title" width="800px" append-to-body :close-on-click-modal="false">
    <el-form ref="dialogRef" :model="form" :rules="rules" label-width="150px">
      <el-form-item label="项目类型" prop="projectId">
        <el-select v-model="form.projectId" @change="changeProjectType">
          <el-option v-for="item in props.baseProjects" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
<!--      <el-form-item label="项目名称" prop="projectName">
        <el-input v-model="form.projectName" placeholder="项目名称" disabled />
      </el-form-item>
 -->      
	<el-form-item label="营业时间" prop="businessStart">
        <el-time-select
          v-model="form.businessStart"
          :max-time="form.businessEnd"
          class="mr-4"
          placeholder="00:00"
          :start="venStore.businessPeriod[0]"
          :end="venStore.businessPeriod[1]"
        />
      </el-form-item>
      <el-form-item label="闭店时间" prop="businessEnd">
        <el-time-select
          v-model="form.businessEnd"
          :min-time="form.businessStart"
          class="mr-4"
          placeholder="00:00"
          :start="venStore.businessPeriod[0]"
          :end="venStore.businessPeriod[1]"
        />
      </el-form-item>
      <el-form-item label="是否允许半小时" prop="halfHourAllow">
        <el-radio-group v-model="form.halfHourAllow">
          <el-radio label="1">是</el-radio>
          <el-radio label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="项目相关场地介绍" prop="introduction"><el-input v-model="form.introduction" type="textarea" /></el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">保 存</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { getCurrentInstance, reactive } from '@vue/runtime-core'
import { watch } from 'vue'
import { toRefs } from '@vueuse/shared'
import useVenStore from '../../../../../../store/modules/ven'
import { projectConfig } from '../../../../../../api/ven'
import useUserStore from '../../../../../../store/modules/user'


const { proxy } = getCurrentInstance()
const venStore = useVenStore()

const props = defineProps({
  props: {
    type: Object,
    default: () => ({
      open: false,
      title: ''
    })
  },
  baseProjects: {
    type: Array,
    default: () => []
  }
})
const emit = defineEmits(['submitForm'])

const formBase = {
  halfHourAllow: '0'
}
const data = reactive({
  form: {
    ...formBase
  },
  rules: {
    projectId: { required: true, message: '请选择项目', trigger: 'change' },
    // projectName: { required: true, message: '请输入项目名称', trigger: 'blur' },
    businessStart: { required: true, message: '请选择营业时间', trigger: 'blur' },
    businessEnd: { required: true, message: '请选择闭店时间', trigger: 'blur' }
  }
})
const { open, title } = toRefs(props.props)
const { form, rules } = toRefs(data)

watch(open, (val) => {
  if (val) {
    form.value = props.props.data || { ...formBase }

    if (!form.value.businessStart) {
      form.value.businessStart = venStore.businessPeriod[0]
      form.value.businessEnd = venStore.businessPeriod[1]
    }
  } else {
    proxy.resetForm('dialogRef')
  }
})

function changeProjectType(id) {
  // const pro = _.find(props.baseProjects, (p) => p.id === id)
  // if (!form.value.projectName) {
  //   form.value.projectName = pro.name
  // }
}

function submitForm() {
  proxy.$refs['dialogRef'].validate((valid) => {
    if (valid) {
      form.value.venueId = useUserStore().user.venueId
      projectConfig(form.value).then(() => {
        proxy.$modal.msgSuccess('操作成功')
        open.value = false
        emit('submitForm')
      })
    } else {
      proxy.$modal.msgError('请完善信息')
    }
  })
}

function cancel() {
  open.value = false
}

</script>

<style scoped>

</style>
